<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_1190625_epsefnde7qw.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>商品分类</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .nav{
            width: 100%;
            height: .44rem;
            position: fixed;
            top: .44rem;
            padding: 0 .4rem;
            background-color: #fff;
        }
        .nav .item{
            width: .58rem;
            text-align: center;
            font-size: .14rem;
            color: #999;
            position: relative;
        }
        .nav .item .right{
            width: .15rem;
            height: .22rem;
            position: absolute;
            right: .03rem;
            top: -0.04rem;
        }
        .nav .item .right i{
            font-size: .2rem;
            color: #999;
        }
        .nav .item .right .icon-down-copy-copy{
            position: absolute;
            left: .01rem;
        }
        .nav .item .right .icon-down{
            position: absolute;
            top: 0.06rem;
            left: 0.01rem;
        }
        .color9{
            color: #999;
        }
        .list{
            width: 100%;
            height: auto;
            padding: .44rem .08rem 0;
            margin-top: .1rem;
        }
        .list .item{
            width: 1.69rem;
            height: auto;
            overflow: hidden;
            margin: 0 .05rem;
            float: left;
            margin-bottom: .1rem;
            border-radius: .03rem;
            background-color: #fff;
            
        }
        .list .item img{
            width: 1.69rem;
            height: 1.69rem;
        }
        .list .item .desc{
            width: 100%;
            height: .76rem;
            padding: 0 .06rem;
        }
        .list .item .desc .a{
            width: 100%;
            font-size: .13rem;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .list .item .desc .b{
            width: 100%;
            margin: .04rem auto;
        }
        .list .item .desc .shop_price{
            font-size: .16rem;
            font-weight: bold;
            color: #F5B443;
            margin-right: .02rem;
            margin-left: -0.02rem;
        }
        .list .item .desc .maket_price{
            font-size: .1rem;
            color: #999;
        }
        .list .item .desc .c{
            font-size: .12rem;
            color: #999;
        }
        
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">热卖商品</h1>
    </header>
    <div class="main">
       <div class="nav flex align-items space-between">
           <div class="item app-font-color">
                <span>综合排序</span> 
           </div>
           <div class="item">
                <span>价格</span>
                <div class="right">
                    <i class="iconfont icon-down-copy-copy "></i>
                    <i class="iconfont icon-down"></i>
                </div>
            </div>
            <div class="item">
                <span>销量</span>
                <div class="right">
                    <i class="iconfont icon-down-copy-copy"></i>
                    <i class="iconfont icon-down"></i>
                </div>
            </div>
       </div>
       <div class="list">
           <div class="item">
                <img src="../../image/goods_02.png">
                <div class="desc flex flex_wrap align-content-center">
                    <div class="a">五星级酒店专用床上用五星级酒店专用床上用</div>
                    <div class="b">
                        <span class="shop_price">￥655.00</span>
                        <span class="maket_price">￥2000.00</span>
                    </div>
                    <div class="c">
                        销量:<span>1365</span>
                    </div>
                </div>
           </div>
           <div class="item">
                <img src="../../image/goods_02.png">
                <div class="desc flex flex_wrap align-content-center">
                    <div class="a">五星级酒店专用床上用五星级酒店专用床上用</div>
                    <div class="b">
                        <span class="shop_price">￥655.00</span>
                        <span class="maket_price">￥2000.00</span>
                    </div>
                    <div class="c">
                        销量: <span>1365</span>
                    </div>
                </div>
           </div>
           <div class="item">
                <img src="../../image/goods_02.png">
                <div class="desc flex flex_wrap align-content-center">
                    <div class="a">五星级酒店专用床上用五星级酒店专用床上用</div>
                    <div class="b">
                        <span class="shop_price">￥655.00</span>
                        <span class="maket_price">￥2000.00</span>
                    </div>
                    <div class="c">
                        销量: <span>1365</span>
                    </div>
                </div>
           </div>
       </div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    $('.nav .item').click(function(){
        $(this).addClass('app-font-color').siblings().removeClass('app-font-color').find('i').removeClass('app-font-color');
        if ($(this).find('.right')){
            if ($(this).find('.icon-down-copy-copy').hasClass('app-font-color')) {
                $(this).find('.icon-down-copy-copy').removeClass('app-font-color')
                $(this).find('.icon-down').addClass('app-font-color')
            }else{
                $(this).find('.icon-down-copy-copy').addClass('app-font-color')
                $(this).find('.icon-down').removeClass('app-font-color')
            }
        }
    })

</script>
</html>